<template>
  <div class="home">
    <van-search v-model="value" placeholder="输入小区或地址" show-action>
      <template #label>
        <div @click="clickCity">{{ city.label }}</div>
      </template>
      <template #action><van-icon name="location-o" size="20" /> </template>
    </van-search>
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" width="100%" />
      </van-swipe-item>
      <!-- <div class="img"></div>s -->
    </van-swipe>
    <router-view></router-view>
    <van-tabbar route :fixed="false">
      <van-tabbar-item replace to="" icon="home-o">整租</van-tabbar-item>
      <van-tabbar-item replace to="" icon="friends-o">合租</van-tabbar-item>
      <van-tabbar-item replace to="" icon="home-o">地图找房</van-tabbar-item>
      <van-tabbar-item replace to="" icon="guide-o">去出租</van-tabbar-item>
    </van-tabbar>

    <van-nav-bar left-text="租房小组" right-text="更多" left-arrow />
    <div class="xz">
      <van-grid :gutter="8" :column-num="2" direction="horizontal">
        <van-grid-item
          v-for="item in List"
          :key="item.id"
          :icon="'http://liufusong.top:8080' + item.imgSrc"
          :text="item.title + item.desc"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
import { banner, content } from '@/api/home'
import { getToken, setOneToken } from '@/utils/storage'
export default {
  name: 'home-page',
  async created() {
    const {
      data: { body }
    } = await banner()
    this.images = body.map((item) => 'http://liufusong.top:8080' + item.imgSrc)
    const {
      data: { body: res }
    } = await content()
    // console.log(res)
    this.List.push(...res)
    setOneToken(this.city)
  },
  data() {
    return {
      value: '',
      images: [],
      List: [],
      active: 2,
      city: JSON.parse(getToken()) || {
        label: '上海',
        value: 'AREA|dbf46d32-7e76-1196',
        pinyin: 'shanghai',
        short: 'sh'
      }
    }
  },
  methods: {
    clickCity() {
      this.$router.push('/city')
    }
  }
}
</script>

<style scoped lang="less">
.van-search {
  position: fixed;
  z-index: 100;
  width: 97%;
  background-color: rgba(0, 0, 0, 0);
  margin-top: 13px;
  margin-left: 10px;
}
.van-tabbar {
  height: 120px;
  line-height: 120px;
}
::v-deep .van-nav-bar__left {
  color: #333;
  font-size: 17px;
  font-weight: 700;
}
::v-deep .van-tabbar-item__icon {
  font-size: 35px;
  margin-bottom: 15px;
  font-weight: 700;
}
.van-nav-bar {
  background-color: #f6f5f6;
}
.xz {
  background-color: #f6f5f6;
}
</style>
